<%--
  Created by IntelliJ IDEA.
  User: jz
  Date: 2022/4/6
  Time: 10:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
  <title>我的消息</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/message_list.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
  <link rel="shortcut icon" href="${pageContext.request.contextPath}/image/smallLogo.svg" type="image/x-icon">
  <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
  <script src="${pageContext.request.contextPath}/layui/layui.js"></script>

  <style>

    <%--        悬浮在a标签上会出现的效果--%>
    .cus_title .logo .title_list li a:hover+span{
      background-image: url("${pageContext.request.contextPath}/image/list_buttom.png");
      background-size: 12px 6px;
    }

    /*给a标签上色*/
    .cus_title .logo .title_list li .current_page{
      color: #23b7b7 !important;
    }

    /*给span标签加三角形*/
    .cus_title .logo .title_list li .current_page_bottom{
      background-image: url("${pageContext.request.contextPath}/image/list_buttom.png");
      background-size: 12px 6px;
    }

  </style>

</head>
<body>
<jsp:include page="../common/head.jsp"/>

<div class="cus_body">
  <div class="left_info">
    <ul class="left_info_ul">
      <li class="left_title">
        <span>我的神行</span>
      </li>
      <li class="left_body">
        <a href="${pageContext.request.contextPath}/customer/customer_info.jsp">用户信息</a>
      </li>
<%--      <li class="left_body">--%>
<%--        <a href="">我的收藏</a>--%>
<%--      </li>--%>
      <li class="left_body">
        <a href="${pageContext.request.contextPath}/ordermanage">订单管理</a>
      </li>
      <li class="left_body">
        <a href="${pageContext.request.contextPath}/customer/coupon/${customer.memberId}">我的优惠券</a>
      </li>
      <li class="left_body">
        <a href="${pageContext.request.contextPath}/message" class="click_style">我的消息</a>
      </li>
    </ul>
  </div>
  <div class="right_info">
    <div class="right_title">
      <h2>我的消息</h2>
    </div>
    <div class="right_body">
      <div class="right_body_box">
        <div class="message_title">
          <span>标题</span>
          <span>消息内容</span>
          <span>时间</span>
          <span>发送人</span>
          <span>状态</span>
        </div>
        <ul class="message_ul">
          <c:forEach items="${MsgList}" var="message">

            <li>
              <span id="title">${message.title}</span>
              <span id="message_body">${message.messageText}</span>
              <span id="time"><fmt:formatDate value="${message.messageDate}" pattern="yyyy-MM-dd HH:mm"/></span>
              <span id="sender"><a href="">${message.shopName}</a></span>
              <span id="statues">${message.status}</span>
            </li>
          </c:forEach>
        </ul>
      </div>
    </div>
  </div>
</div>

<script>
  var websocket = null;
  if('WebSocket' in window) {
    websocket = new WebSocket('ws://localhost:8080/zuche/webSocket');
  }else {
    alert('该浏览器不支持websocket!');
  }

  websocket.onopen = function (event) {
    console.log('建立连接');
  }

  websocket.onclose = function (event) {
    console.log('连接关闭');
  }

  websocket.onmessage = function (event) {

    console.log('收到消息:' + event.data);
    var message = event.data;
    var arr = message.split(",");
    var title =arr[0];
    var messageBody = arr[1];
    var shopName = arr[2];
    var OrderTime = arr[3];
    var statues = arr[4];
    console.log(title);
    // document.getElementById('message').innerHTML += innerHTML;


    setMessageInnerHTML(title,messageBody,OrderTime,shopName);
  }
  // $(".message").val(title);
  // $("#sender").val(shopName);
  // $("#time").val(OrderTime);

  websocket.onerror = function () {
    alert('websocket通信发生错误！');
  }

  window.onbeforeunload = function () {
    websocket.close();
  }
  function  setMessageInnerHTML(title,messageBody,time,sender){
    document.getElementById('message').innerHTML += title +'<br>';
    document.getElementById('message_body').innerHTML += messageBody;
    document.getElementById('time').innerHTML += time +'<br>';
    document.getElementById('sender').innerHTML += sender +'<br>';
    document.getElementById('statues').innerHTML += statues +'<br>';
  }



</script>
</body>
</html>
